<template>
  <div class="app-container">
    <div style="margin-bottom: 20px;">
      <el-button @click="onAddProxyTap">添加代理</el-button>
      <el-button @click="onConfigProxyTap">一键配置代理到游戏账号</el-button>
      <el-button @click="onResetProxyTap">重置游戏账号代理</el-button>
    </div>
    <el-table v-loading="isLoading" :data="proxyList" element-loading-text="Loading" border fit highlight-current-row>
      <el-table-column label="Index" width="95">
        <template slot-scope="scope">
          {{ scope.$index }}
        </template>
      </el-table-column>
      <el-table-column prop="id" label="ID" width="95">
      </el-table-column>
      <el-table-column prop="proxy" label="代理">
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="260">
        <template slot-scope="scope">
          <el-button @click="onUpdateClick(scope.row)" type="text" size="small">编辑</el-button>
          <el-button @click="onDeleteClick(scope.row)" type="text" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <add-proxy :visible="this.showProxyDialog" @on-dismiss="onDialogDismiss"></add-proxy>
  </div>
</template>
<script>

import AddProxy from "./components/AddProxy.vue";

export default {
  components: {
    AddProxy,
  },
  data() {
    return {
      isLoading: false,
      showProxyDialog: false,
    }
  },
  created() {
    this.$store.dispatch("loadProxyList")
  },
  computed: {
    proxyList() {
      return this.$store.state.proxy.proxyList
    },
  },
  methods: {
    onAddProxyTap() {
      this.showProxyDialog = true
    },
    async onDialogDismiss(proxyText) {
      this.showProxyDialog = false
      if ((proxyText ?? "") == "") {
        return
      }
      console.log(proxyText)
      const proxyArr = proxyText.split("\n")
      this.$store.dispatch("addProxyList", proxyArr)
    },
    async onConfigProxyTap() {
      await this.$store.dispatch("configProxyList")
      this.$message({
        type: "success",
        message: "成功配置代理，请到TG账号页面确认"
      })
    },
    async onDeleteClick(proxy) {
      this.$store.dispatch("deleteProxy", proxy)
    },
    async onUpdateClick(proxy) {
      this.$prompt('请输入新的合法代理', "修改代理", {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        // inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
        // inputErrorMessage: '邮箱格式不正确'
      }).then(({ value }) => {
        proxy.proxy = value
        this.$store.dispatch("updateProxy", proxy)
      }).catch(() => {
      });
    },
    async onResetProxyTap() {
      await this.$store.dispatch("resetProxyList")
      this.$message({
        type: "success",
        message: "已重置游戏代理"
      })
    }
  }
}
</script>
<style lang="">

</style>